<template>
  <el-dialog

    :title="!dataForm.supplierId ? this.$i18n.t('crud.addTitle') : this.$i18n.t('temp.modify')"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
             label-width="100px">

      <el-form-item :label="this.$i18n.t('shop.supplierName')" prop="supplierName">
        <el-input v-model="dataForm.supplierName" maxlength="50"  show-word-limit></el-input>
      </el-form-item>

      <el-form-item :label="this.$i18n.t('shop.tel')" prop="tel">
        <el-input v-model="dataForm.tel" maxlength="50" ></el-input>
      </el-form-item>
      <el-form-item :label="this.$i18n.t('sys.areaName')" prop="province">
        <el-col :span="8">
          <el-form-item prop="province">
            <el-select v-model="dataForm.provinceId" :placeholder="this.$i18n.t('tip.select')" @change="selectProvince">
              <el-option
                v-for="province in provinceList"
                :key="province.areaId"
                :label="province.areaName"
                :value="province.areaId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="city">
            <el-select v-model="dataForm.cityId" :placeholder="this.$i18n.t('tip.select')" @change="selectCity">
              <el-option
                v-for="city in cityList"
                :key="city.areaId"
                :label="city.areaName"
                :value="city.areaId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="area">
            <el-select v-model="dataForm.areaId" :placeholder="this.$i18n.t('tip.select')">
              <el-option
                v-for="area in areaList"
                :key="area.areaId"
                :label="area.areaName"
                :value="area.areaId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item :label="this.$i18n.t('address.detailed')" prop="addr">
        <el-input v-model="dataForm.addr" maxlength="1000"></el-input>
      </el-form-item>
      <el-form-item :label="this.$i18n.t('shop.contactName')" prop="contactName">
        <el-input v-model="dataForm.contactName" maxlength="50" show-word-limit></el-input>
      </el-form-item>
      <el-form-item :label="this.$i18n.t('shop.contactTel')" prop="contactTel">
        <el-input v-model="dataForm.contactTel" maxlength="50"></el-input>
      </el-form-item>
      <el-form-item :label="this.$i18n.t('shop.qq')" prop="qqNumber">
        <el-input v-model="dataForm.qqNumber" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item :label="this.$i18n.t('shop.weChatNumber')" prop="wxNumber">
        <el-input v-model="dataForm.wxNumber" maxlength="100"></el-input>
      </el-form-item>
      <el-form-item :label="this.$i18n.t('shop.mailbox')" prop="mail">
        <el-input v-model="dataForm.mail" maxlength="100"></el-input>
      </el-form-item>
      <el-form-item :label="this.$i18n.t('shop.fax')" prop="fax">
        <el-input v-model="dataForm.fax" maxlength="100"></el-input>
      </el-form-item>

      <el-form-item :label="this.$i18n.t('product.status')" prop="status">
        <template>
          <el-radio v-model="dataForm.status" :label="1">{{$t("groups.startUsing")}}</el-radio>
          <el-radio v-model="dataForm.status" :label="0">{{$t("publics.disable")}}</el-radio>
        </template>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{$t("crud.filter.cancelBtn")}}</el-button>
      <el-button type="primary" @click="dataFormSubmit()">{{$t("crud.filter.submitBtn")}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          refundAddrId: null,
          supplierId: null,
          shopId: null,
          supplierName: null,
          tel: null,
          provinceId: null,
          province: null,
          cityId: null,
          city: null,
          areaId: null,
          area: null,
          addr: null,
          contactName: null,
          contactTel: null,
          qqNumber: null,
          wxNumber: null,
          mail: null,
          fax: null,
          createTime: null,
          updateTime: null,
          status: 1
        },
        provinceList: [],
        cityList: [],
        areaList: [],
        dataRule: {
          supplierName: [
            { required: true, message: this.$i18n.t('shop.supplierName') + this.$i18n.t('publics.noNull'), trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      init (supplierId) {
        this.dataForm.supplierId = supplierId || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          this.cityList = []
          this.areaList = []
          this.dataForm.provinceId = null
          this.dataForm.cityId = null
          this.dataForm.areaId = null
        })
        this.listAreaByParentId().then(({data}) => {
          this.provinceList = data
        })
        if (this.dataForm.supplierId) {
          this.$http({
            url: this.$http.adornUrl('/supplier/supplier/info/' + this.dataForm.supplierId),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            this.dataForm = data
            this.listAreaByParentId(data.provinceId).then(({data}) => {
              this.cityList = data
            })
            this.listAreaByParentId(data.cityId).then(({data}) => {
              this.areaList = data
            })
          })
        }
      },
      // 表单提交
      dataFormSubmit () {
        this.getAreaName()
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/supplier/supplier'),
              method: this.dataForm.supplierId ? 'put' : 'post',
              data: this.$http.adornData(this.dataForm)
            }).then(({data}) => {
              this.$message({
                message: this.$i18n.t('publics.operation'),
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            })
          }
        })
      },

      // 选择省
      selectProvince (val) {
        this.dataForm.cityId = null
        this.dataForm.city = ''
        // 获取城市的select
        this.listAreaByParentId(val).then(({data}) => {
          this.cityList = data
        })
      },
      // 选择市
      selectCity (val) {
        this.dataForm.areaId = null
        this.dataForm.area = ''
        // 获取区的select
        this.listAreaByParentId(val).then(({data}) => {
          this.areaList = data
        })
      },
      listAreaByParentId (pid) {
        if (!pid) pid = 0
        return this.$http({
          url: this.$http.adornUrl(`/admin/area/listByPid`),
          method: 'get',
          params: this.$http.adornParams({pid})
        })
      },
      /**
       * 通过省市区id,得到省市区名称
       */
      getAreaName () {
        for (let i = 0; i < this.provinceList.length; i++) {
          if (this.provinceList[i].areaId === this.dataForm.provinceId) {
            // 将省名字保存起来
            this.dataForm.province = this.provinceList[i].areaName
          }
        }
        for (let i = 0; i < this.cityList.length; i++) {
          if (this.cityList[i].areaId === this.dataForm.cityId) {
            // 将市名字保存起来
            this.dataForm.city = this.cityList[i].areaName
          }
        }
        for (let i = 0; i < this.areaList.length; i++) {
          if (this.areaList[i].areaId === this.dataForm.areaId) {
            // 将市名字保存起来
            this.dataForm.area = this.areaList[i].areaName
          }
        }
      }
    }
  }
</script>
